import React from "react";
import * as ReactDOM from "react-dom";
import {Col, Row} from 'antd';
import 'antd/dist/antd.css';
import FileSearch from "./components/FileSearch";
import FileList from "./components/FileList";
import './index.css';
import BottomBtn from "./components/BottomBtn";
import TabList from "./components/TabList";

function App() {

    return (
        <div>
            <Row>
                <Col span={6}>
                    <FileSearch
                        title={"我的云文档1"}
                        onFileSearch={(value) => {
                            console.log(value);
                        }}
                    />
                    <FileList
                        onFileClick={(id) => {
                            console.log('click ' + id)
                        }}
                        onSaveEdit={(id, newValue) => {
                            console.log('edit ' + newValue + ' ' + id)
                        }}
                        onFileDelete={(id) => {
                            console.log('delete ' + id)
                        }}
                    />
                    <Row>
                        <Col span={10}>
                            <BottomBtn
                                text='新建'
                                type='primary'
                                icon='plus'
                                onBtnClick={()=>{
                                    console.log('新建');
                                }}
                            />
                        </Col>
                        <Col span={4} />
                        <Col span={10}>
                            <BottomBtn
                                text='导入'
                                type='default'
                                icon='import'
                                onBtnClick={()=>{
                                    console.log('导入');
                                }}
                            />
                        </Col>
                    </Row>
                </Col>
                <Col span={18}>
                    <TabList
                        onTabClick={(id) => {
                            console.log(id)
                        }}
                        onCloseTab={(id) => {
                            console.log(id)
                        }}
                    />
                </Col>
            </Row>
        </div>
    )
}

ReactDOM.render(
    <App/>,
    document.getElementById('root')
);
